<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本样式和列表样式</title>
    <style>
        /* 文本样式 */
        /* div1 内的 p 元素样式 */
        
        .div1 p {
            font-family: "宋体", "楷体";
            text-align: center;
            /* 文本居中对齐 */
            text-decoration: underline;
            /* 文本添加下划线 */
            line-height: 1.5;
            /* 设置行高为 1.5 倍 */
        }
        /* div2 内的第一个 span 元素样式 */
        
        .div2 span:nth-of-type(1) {
            color: rebeccapurple;
            font-family: "楷体";
            font-size: 2em;
            font-weight: 700;
            font-style: normal;
            text-transform: uppercase;
            /* 文本转换为大写 */
        }
        /* div2 内的第二个 span 元素样式 */
        
        .div2 span:nth-of-type(2) {
            color: rebeccapurple;
            font-family: "楷体";
            font-size: 2em;
            font-weight: 400;
            font-style: initial;
            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
            /* 添加文本阴影 */
        }
        /* div2 内的第三个 span 元素样式 */
        
        .div2 span:nth-of-type(3) {
            color: rebeccapurple;
            font-family: "楷体";
            font-size: 2em;
            font-weight: 400;
            font-style: initial;
            letter-spacing: 2px;
            /* 设置字母间距为 2 像素 */
        }
        /* 列表样式 */
        /* 无序列表样式 */
        
        .ul-list {
            list-style-type: square;
            /* 列表项标记为方形 */
            list-style-position: inside;
            /* 列表项标记放在内容内部 */
            padding-left: 20px;
            /* 设置列表的左内边距 */
        }
        /* 有序列表样式 */
        
        .ol-list {
            list-style-type: upper-roman;
            /* 列表项标记为大写罗马数字 */
            list-style-position: outside;
            /* 列表项标记放在内容外部 */
            margin-left: 30px;
            /* 设置列表的左外边距 */
        }
    </style>
</head>

<body>
    <!-- 文本样式示例 -->
    <div class="div1">
        <p>这段文本使用宋体或楷体，居中对齐，有下划线，行高为 1.5 倍。</p>
    </div>

    <div class="div2">
        <span>这段文本会转换为大写</span>
        <span>这段文本有阴影效果</span>
        <span>这段文本字母间距为 2 像素</span>
    </div>

    <!-- 列表样式示例 -->
    <ul class="ul-list">
        <li>无序列表项 1</li>
        <li>无序列表项 2</li>
        <li>无序列表项 3</li>
    </ul>

    <ol class="ol-list">
        <li>有序列表项 1</li>
        <li>有序列表项 2</li>
        <li>有序列表项 3</li>
    </ol>
</body>

</html>